import {
	createSakuraCanvas
} from '../uni_modules/sakura-canvas-ts/js_sdk/src';

export default class DrawPoster {
	width;
	height;
	poster;
	canvasId;
	instance;

	constructor(width, height, canvasId, poster) {
		this.width = width;
		this.height = height;
		this.canvasId = canvasId;
		this.poster = poster;

		this.init();
	}

	async init() {

		await this.createIns({
			canvasWidth: this.width,
			canvasHeight: this.height,
			type: '2d',
			canvasId: this.canvasId
		});

		await this.draw();
	}

	async createIns(params) {
		try {
			this.instance = await createSakuraCanvas(params);
		} catch (error) {
			console.log(error);
		}
	}

	async draw() {
		await this.instance.createCanvasBackgroud({
			color: '#fff'
		});

		const imageDomInfo = await this.instance.createImage({
			width: this.width,
			height: 300,
			src: this.poster.image,
			mode: 'aspectFit'
		});

		// 绘制标题
		const titleInfo = await this.instance.createText({
			text: this.poster.name,
			color: '#333333',
			width: this.width - 8 * 2,
			y: imageDomInfo.wrapPositionInfo.endY + 20,
			window: {
				algin: 'center'
			},
			line: {
				height: 20,
				num: 2
			},
			font: {
				size: 16
			}
		});

		const qrcodeDomInfo = await this.instance.createImage({
			width: 77,
			height: 77,
			x: titleInfo.endX - 77,
			y: titleInfo.endY + 30,
			src: this.poster.qrcode,
			mode: 'aspectFit'
		});

		const vipPriceText = `¥${this.poster.vipPrice}`,
			priceText = `¥${this.poster.price}`;
		// 绘制价格
		const priceInfo = await this.instance.createText({
			x: titleInfo.startX,
			y: qrcodeDomInfo.wrapPositionInfo.startY + 10,
			text: `${vipPriceText}   ${priceText}`,
			font: {
				size: 13
			},
			highlightText: [{
					text: vipPriceText,
					color: '#FF2831',
					font: {
						size: 20,
						weight: 'bold'
					},
					siblingsAlgin: 'center'
				},
				{
					text: priceText,
					color: '#999999',
					line: {
						type: 'lineThrough',
						color: '#999999'
					},
					siblingsAlgin: 'center'
				}
			]
		});

		let text = '长按识别二维码查看';

		// #ifdef MP-WEIXIN
		text = '长按识别小程序吗码查看';
		//  #endif
		await this.instance.createText({
			text: text,
			x: priceInfo.startX,
			y: priceInfo.endY + 40,
			color: '#999',
			font: {
				size: 10
			}
		});

		await this.instance.createText({
			text: this.poster.share_content,
			x: priceInfo.startX,
			y: priceInfo.endY + 20,
			color: '#000',
			font: {
				size: 11
			}
		});

	}

	async generatePoster() {
		const res = await this.instance.exportImage();
		console.log(res.data);
		return res.data;
	}
}